<template>
  <div>
    <div class="new-filter-mask heroskin-conn" @touchmove.prevent>
      <div class="top-header fixed-top border-bottom">
        <div class="top-back">
          <a href="javascript:void(0);" @click="goBack()"></a>
        </div>
        <h2 class="f36 " v-text="title"></h2>
        <div class="top-right"></div>
      </div>
      <div style="height: 0.97rem"></div>

      <swiper class="mint-swipe" :options="swiperOption">
        <swiper-slide class="mint-swipe-item" v-for="items in listNum">
          <ul>
            <li v-for="item in items">
              <div class="ad-img" :class="{isShowImg:istrue}" @click="show(0,item)" v-if="item.DefaultHeadPic">
                <img :src="item.DefaultHeadPic">
                <div class="hero_alert" v-if="!item.HasHero"></div>
              </div>
              <div v-if="item.Title" class="ad-text f24 color-000">{{item.DefaultSkinName}}</div>
              <div v-if="item.Title" class="an-num fontarial bg-m1 f22 color-fff text-center">{{item.Skins.length}}</div>
              <div v-if="!item.DefaultHeadPic" style="width:1.2rem;height:1.62rem;"></div>
            </li>

          </ul>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

      <!-- <mt-swipe :auto="0" :continuous =false>
        <mt-swipe-item v-for="items in listNum">
          <ul>
            <li v-for="item in items">
              <div class="ad-img" @click="show(0,item)">
                <img :src="item.DefaultHeadPic">
                <div class="hero_alert" v-if="!item.HasHero"></div>
              </div>
              <div class="ad-text f24 color-000">{{item.Title}}</div>
              <div class="an-num fontarial bg-m1 f22 color-fff text-center">{{item.Skins.length}}</div>
            </li>
            <span class="clear"></span>
          </ul>
        </mt-swipe-item>
      </mt-swipe> -->



    </div>
    <AccountPreviwerLol v-if="isHide" :list="imageList" @isShowRightClose="isShowRightClose" ref="previewer"></AccountPreviwerLol>
    <!--<previewerSmall :list="imageList" ref="previewer"></previewerSmall>-->
  </div>




</template>

<script>
  import { mapState, mapGetters, mapActions } from 'vuex'
  //  import previewerSmall  from './AccountPreviwerSmall.vue' // 查看图片
  import AccountPreviwerLol  from './AccountPreviwerLol.vue' // 查看图片
  import Vue from 'vue'
  // import { Swipe, SwipeItem } from 'mint-ui';
  // Vue.component(Swipe.name, Swipe);
  // Vue.component(SwipeItem.name, SwipeItem);
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    data() {
      return {
        isHide:false,
        swiperOption: {
           /** notNextTick是一个组件自有属性，如果notNextTick设置为true，
           * 组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，
           * 假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
           */
           notNextTick: true,
           // swiper configs 所有的配置同swiper官方api配置
           autoplay: false,
           direction : 'horizontal',
           grabCursor : true,
           setWrapperSize :true,
           autoHeight: true,
           loop: false,
           pagination : '.swiper-pagination',
           paginationClickable :true,
           mousewheelControl : false,
           longSwipesRatio: 0.3,
           touchRatio:1,
           observer: true,
            observeParents:true,
           //用户操作了swiper是否禁止自动播放
           autoplayDisableOnInteraction: false,
           lazyLoading : true,
           // swiper callbacks
           // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
           //  onTransitionStart(swiper){
           //    console.log(swiper)
           //  },
           // more Swiper configs and callbacks...
           // ...
         },

        title:"英雄联盟",
        list:[],
        dropDowns:[],
        isBoolTrue:false,
        imageList:[],
        isPage:0,
        istrue:true,
      }
    },
    components: {
      AccountPreviwerLol,
      swiper,
      swiperSlide
    },
    computed:{
    },

    methods: {
      show (index,item) {
        this.isHide = true
        this.istrue = false
        this.imageList = item.Skins
        if(this.imageList.length!=0){
          setTimeout(()=>{
            this.$refs.previewer.show(index)
          },200)
        }
      },
      isShowRightClose(str){
        this.isPage = str
        this.isKai = true
      },
      goBack(){
        this.$parent.showSkin = false
//        document.body.style.overflow='visible';
      },
    },
    watch: {

    },

    props:["listNum"]

  }
</script>
<style src="css/plugin/swiper.css" ></style>
<style scoped>
  .hero_alert {
    background-color: #fff;
    height: 100%;
    width: 100%;
    top: 0px;
    position: absolute;
    opacity: 0.5;
    filter: Alpha(opacity=50);
  }
  .new-filter-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    max-width: 768px;
    background: #fff;
  }
  .mint-swipe .mint-swipe-item ul li{
    float: left;
    width: 1.2rem;
    height: auto;
    display: block;
    margin-right: 0.27rem;
    position: relative;
  }
  .mint-swipe-item{
    height: auto;
    display: block;
    padding-left: .3rem !important;
    padding-top: .3rem !important;
  }
  .mint-swipe-item ul li .ad-img {
    width: 1.2rem;
    height: 1.2rem;
  }
  .isShowImg{
    background-image: url(~images/lol/5.gif);
    background-size: 100% 100%;
  }
  .mint-swipe-item ul li .ad-img img {
    width: 100%;
    height: 100%;
  }
  .mint-swipe-item ul li .ad-text {
    text-align: center;
    height: 0.42rem;
    line-height: 0.42rem;
    overflow: hidden;
  }

  .mint-swipe-item ul li .an-num {
    position: absolute;
    width: 0.34rem;
    height: 0.34rem;
    line-height: 0.34rem;
    top: -0.08rem;
    right: -0.08rem;
    border-radius: 100%;
  }

</style>

<style>
  .swiper-container{
    overflow: visible;
  }
  .swiper-container-horizontal .swiper-pagination-bullets{
    z-index:1000;
        bottom: -0.7rem;
  }
  .swiper-pagination{
    /*position: fixed;
    bottom: 0rem;
    max-width: 7.68rem;
    width: 100%;
    text-align: center;
    height: auto;*/
  }
  .swiper-pagination-bullet {
    display: inline-block;
    background: url(~images/index/list-ico.png) no-repeat center center;
    width: 0.14rem;
    height: 0.14rem;
    margin: 0 0.05rem;
    background-size: 0.12rem;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background-color: #e8e8e8;
    background: url(~images/index/list-ico-active.png) no-repeat center center;
    background-size: 0.12rem;
  }
</style>
